<template>
  <view class="container">
    <!-- 顶部标签栏 -->
    <view class="tab-header glass-effect">
      <view class="tab-nav">
        <view 
          v-for="(tab, index) in tabs" 
          :key="index"
          :class="['tab-item', currentTab === index ? 'active' : '']"
          @tap="switchTab(index)"
        >
          <text class="tab-text">{{ tab }}</text>
          <view class="tab-indicator" v-if="currentTab === index"></view>
        </view>
      </view>
    </view>
    
    <!-- 内容区域 -->
    <swiper 
      class="content-swiper"
      :current="currentTab"
      @change="handleSwiperChange"
      style="flex: 1;"
    >
      <!-- 团签介绍列表 -->
      <swiper-item>
        <scroll-view 
          scroll-y 
          class="scroll-list"
          @scrolltolower="loadMore"
        >
          <view class="guide-list">
            <view 
              class="guide-card glass-card" 
              v-for="(item, index) in filteredList" 
              :key="index"
              @tap="navigateToDetail(item)"
            >
              <view class="guide-content">
                <view class="guide-title-container">
                  <view class="guide-category">[{{ item.title }}]</view>
                  <text class="guide-title">{{ item.sign }}</text>
                </view>
                <view class="guide-info">
                  <text class="guide-date">{{ item.createTime }}</text>
                </view>
              </view>
              <image class="guide-image" :src="item.imgUrl" mode="aspectFill"></image>
            </view>
          </view>
          
          <!-- 底部安全区域 -->
          <view style="height: 160rpx;"></view>
        </scroll-view>
      </swiper-item>
      
      <!-- 旅游攻略列表 -->
      <swiper-item>
        <scroll-view 
          scroll-y 
          class="scroll-list"
          @scrolltolower="loadMore"
        >
          <view class="guide-list">
            <view 
              class="guide-card glass-card" 
              v-for="(item, index) in filteredList" 
              :key="index"
              @tap="navigateToDetail(item)"
            >
              <view class="guide-content">
                <view class="guide-title-container">
                  <view class="guide-category">[{{ item.title }}]</view>
                  <text class="guide-title">{{ item.sign }}</text>
                </view>
                <view class="guide-info">
                  <text class="guide-date">{{ item.createTime }}</text>
                </view>
              </view>
              <image class="guide-image" :src="item.image" mode="aspectFill"></image>
            </view>
          </view>
          
          <!-- 底部安全区域 -->
          <view style="height: 160rpx;"></view>
        </scroll-view>
      </swiper-item>
    </swiper>
    
    <!-- TabBar组件 -->
    <cc-myTabbar :tabBarShow="3"></cc-myTabbar>
  </view>
</template>

<script>
import {introduce} from "@/api/pt";
export default {
  data() {
    return {
      // 标签页相关
      tabs: ['团签介绍', '旅游攻略'],
      currentTab: 0,
      
      // 类型常量
      INTRO_TYPE: {
        VISA_INTRO: 0,  // 团签介绍
        TRAVEL_GUIDE: 1  // 旅游攻略
      },
      
      // 列表数据
      list: [],
      loading: false,
      hasMore: true,
      pageNum: 1,
      pageSize: 10
    };
  },

  computed: {
    // 根据当前选中的标签页过滤列表
    filteredList() {
      const targetType = this.currentTab === 0 ? this.INTRO_TYPE.VISA_INTRO : this.INTRO_TYPE.TRAVEL_GUIDE;
      return this.list.filter(item => item.type === targetType);
    }
  },

  mounted() {
    // 设置状态栏为白色背景黑色字体
    uni.setNavigationBarColor({
      frontColor: '#000000',
      backgroundColor: '#FFFFFF'
    });
    // 初始加载数据
    this.loadData();
  },

  methods: {
    // 切换标签
    switchTab(index) {
      this.currentTab = index;
      // 如果当前标签页没有数据，则加载数据
      const targetType = index === 0 ? this.INTRO_TYPE.VISA_INTRO : this.INTRO_TYPE.TRAVEL_GUIDE;
      if (!this.list.some(item => item.type === targetType)) {
        this.resetPagination();
        this.loadData();
      }
    },
    
    // 处理滑动切换
    handleSwiperChange(e) {
      const index = e.detail.current;
      this.currentTab = index;
      // 如果当前标签页没有数据，则加载数据
      const targetType = index === 0 ? this.INTRO_TYPE.VISA_INTRO : this.INTRO_TYPE.TRAVEL_GUIDE;
      if (!this.list.some(item => item.type === targetType)) {
        this.resetPagination();
        this.loadData();
      }
    },
    
    // 重置分页
    resetPagination() {
      this.pageNum = 1;
      this.hasMore = true;
    },
    
    // 格式化日期
    formatDate(dateStr) {
      if (!dateStr) return '';
      try {
        const date = new Date(dateStr);
        if (isNaN(date.getTime())) return '';
        const year = date.getFullYear();
        const month = String(date.getMonth() + 1).padStart(2, '0');
        const day = String(date.getDate()).padStart(2, '0');
        return `${year}-${month}-${day}`;
      } catch (error) {
        console.error('日期格式化错误:', error);
        return '';
      }
    },

    // 处理列表数据
    processListData(data) {
      if (!Array.isArray(data)) return [];
      return data.map(item => ({
        ...item,
        updateDate: this.formatDate(item.updateDate)
      }));
    },

    // 加载数据
    async loadData() {
      if (this.loading || !this.hasMore) return;
      
      this.loading = true;
      try {
        const type = this.currentTab === 0 ? this.INTRO_TYPE.VISA_INTRO : this.INTRO_TYPE.TRAVEL_GUIDE;
        const res = await introduce({
          type,
          pageNum: this.pageNum,
          pageSize: this.pageSize
        });
        
        if (res.code == 200) {
          // 处理数据并追加
          const processedData = this.processListData(res.rows);
          
          // 如果是第一页，清空列表
          if (this.pageNum === 1) {
            this.list = processedData;
          } else {
            this.list = [...this.list, ...processedData];
          }
          
          // 更新是否还有更多数据
          this.hasMore = this.list.length < res.total;
          // 更新页码
          this.pageNum++;
        } else {
          uni.showToast({
            title: res.msg || '加载失败',
            icon: 'none'
          });
        }
      } catch (error) {
        console.error('加载数据失败:', error);
        uni.showToast({
          title: '加载失败',
          icon: 'none'
        });
      } finally {
        this.loading = false;
      }
    },
    
    // 加载更多
    loadMore() {
      this.loadData();
    },
    
    // 导航到详情页
    navigateToDetail(item) {
      console.log('查看详情:', item.title);
      uni.navigateTo({
        url: `/pages/introduce/detail?id=${item.id}&type=${item.type}`
      });
    }
  }
};
</script>

<style>
.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: #f0f5ff;
  background-image: linear-gradient(125deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.1));
}

/* 顶部标签栏样式 - 固定在顶部 */
.tab-header {
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  height: 88rpx;
  z-index: 100;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  background-color: rgba(255, 255, 255, 0.6);
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

.tab-nav {
  display: flex;
  justify-content: center;
  height: 100%;
  position: relative;
}

.tab-item {
  position: relative;
  padding: 0 48rpx;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tab-text {
  font-size: 32rpx;
  color: rgba(0, 0, 0, 0.6);
  font-weight: 500;
  transition: color 0.3s;
}

.tab-item.active .tab-text {
  color: #007AFF;
  font-weight: 600;
}

.tab-indicator {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 48rpx;
  height: 6rpx;
  background-color: #007AFF;
  border-radius: 3rpx;
  transition: all 0.3s ease-in-out;
}

/* Swiper和内容区域 */
.content-swiper {
  height: calc(100vh - 88rpx - 110rpx);
}

.scroll-list {
  height: 100%;
  padding: 20rpx 30rpx 0 30rpx;
  box-sizing: border-box;
}

/* 卡片列表样式 */
.guide-list {
  width: 100%;
}

.guide-card {
  margin-bottom: 30rpx;
  border-radius: 20rpx;
  overflow: hidden;
  background-color: rgba(255, 255, 255, 0.7);
  box-shadow: 0 8rpx 32rpx rgba(31, 38, 135, 0.15);
  display: flex;
  justify-content: space-between;
  padding: 24rpx;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.glass-card {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.guide-card:active {
  transform: scale(0.98);
  box-shadow: 0 4rpx 15rpx rgba(31, 38, 135, 0.1);
}

.guide-content {
  flex: 1;
  padding-right: 20rpx;
}

.guide-title-container {
  margin-bottom: 10rpx;
}

.guide-category {
  font-size: 26rpx;
  color: #5786e7;
  margin-bottom: 10rpx;
  font-weight: 500;
}

.guide-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #333333;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.guide-info {
  margin-top: 20rpx;
}

.guide-date {
  font-size: 24rpx;
  color: #6e7882;
  background-color: rgba(255, 255, 255, 0.5);
  padding: 4rpx 12rpx;
  border-radius: 50rpx;
}

.guide-image {
  width: 140rpx;
  height: 140rpx;
  border-radius: 16rpx;
  object-fit: cover;
  align-self: center;
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
}

/* 玻璃态效果 */
.glass-effect {
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  background-color: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

@supports (bottom: constant(safe-area-inset-bottom)) or (bottom: env(safe-area-inset-bottom)) {
  .content-swiper {
    height: calc(100vh - 88rpx - 110rpx - constant(safe-area-inset-bottom));
    height: calc(100vh - 88rpx - 110rpx - env(safe-area-inset-bottom));
  }
}
</style>
